<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-11-21 13:42:49
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-18 14:40:58
 * @FilePath: \global-brain\global-brain-admin\src\views\System\Knowledge\components\Edit.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, watch, ref, reactive } from 'vue'
// import { LeeEdit2 } from '@/components/Lee/Edit'
import {
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElInput,
  ElSelect,
  ElOption,
  ElTreeSelect,
  ElButton
} from 'element-plus'
import { UploadFile, UploadVideo, UploadImageMultiple } from '@/components/Upload'
import { VideoPlayer } from '@/components/VideoPlayer'
// import { TEditor } from '@/components/TEditor'
import { sysKnowledgeClassListApi } from '@/api/sys/knowledgeClass'
import { required } from '@/utils/formRules'
import { LeeTiptapEditor } from '@/components/Lee/Editor'

// 获取字典
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const dict: any = wsCache.get('dict')

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})

const rules = reactive({
  title: [required],
  type: [required],
  knowledge_class_id: [required],
  content: [required]
})

const data = ref<any>({})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    data.value = JSON.parse(JSON.stringify(currentRow))
  },
  {
    deep: true,
    immediate: true
  }
)

const elFormRef = ref()

const getFormData = async () => {
  return data.value
}

const classData = ref([])
// 分类列表查询
const getClassList = async () => {
  let res = await sysKnowledgeClassListApi({})
    .catch(() => {})
    .finally(() => {})
  if (res) {
    classData.value = res.data
  }
}

// const newContent = ref<any>()

const onChangeType = (value) => {
  switch (value) {
    case '1':
      data.value.content = ''
      break
    case '2':
      data.value.content = ''
      break
    case '3':
      data.value.content = ''
      break
    case '4':
      alert('富文本编辑器需要再开发')
      // data.value.content = ''
      break
    default:
      alert('onChangeType未知的类型')
  }
}

defineExpose({
  elFormRef,
  getFormData
})

//初始化
const init = async () => {
  // 查询知识库分类数据
  await getClassList()
}
init()
</script>

<template>
  <div class="p-10px">
    <ElForm
      ref="elFormRef"
      :rules="rules"
      :model="data"
      label-width="auto"
      label-position="right"
      class="v-form"
    >
      <ElRow :gutter="20">
        <ElCol :span="24">
          <ElFormItem label="标题" prop="title">
            <ElInput v-model="data.title" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="类型" prop="type">
            <ElSelect v-model="data.type" placeholder="请选择" @change="onChangeType">
              <ElOption
                v-for="item in dict.sys_knowledge_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="知识库分类" prop="knowledge_class_id">
            <ElTreeSelect
              v-model="data.knowledge_class_id"
              :data="classData"
              check-strictly
              default-expand-all
              node-key="knowledge_class_id"
              :props="{
                children: 'children',
                label: 'class_name'
              }"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="内容" prop="content">
            <template v-if="data.type == '1'">
              <UploadVideo v-model="data.content" />
            </template>
            <template v-if="data.type == '2'">
              <UploadImageMultiple v-model="data.content" />
            </template>
            <template v-if="data.type == '3'">
              <UploadFile v-model="data.content" />
            </template>
            <template v-if="data.type == '4'">
              <LeeTiptapEditor v-model="data.content" />
            </template>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <div v-if="data.content">
      <template v-if="data.type == '1'">
        <div class="w-[100%] flex justify-center">
          <VideoPlayer :url="data.content" />
        </div>
      </template>
      <template v-if="data.type == '3'">
        <div class="w-[100%] flex justify-center">
          <img src="https://apiuser.grazlink.com/img/download.png" />
        </div>
        <div class="w-[100%] text-center">
          <ElButton type="primary" class="w-[200px]">下载文件</ElButton>
        </div>
      </template>
    </div>
  </div>
</template>
